<template>
    <div>
      <el-container>
        <el-header>
          <div style="border: 1px;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

              <el-menu-item index="1" ><img style="margin-left: 20px ;width: 150px;height: 50px" src="http://qpt0e0e6g.hb-bkt.clouddn.com/login.png"></el-menu-item>
              <el-menu-item index="2" style="margin-left: 10px;font-size: 18px" @click="toindex">首页</el-menu-item>
              <el-menu-item index="3" style="margin-left: 10px;font-size: 18px">榜单</el-menu-item>
              <el-menu-item index="4"  style="margin-left: 10px;font-size: 18px">COS</el-menu-item>
              <el-menu-item index="5"  style="margin-left: 10px;font-size: 18px"><router-link to="/redios">视频</router-link></el-menu-item>
              <el-menu-item index="6"  style="margin-left: 10px;font-size: 18px">问答</el-menu-item>
              <el-menu-item index="7">
                <el-input  style="width: 200px ;"
                           placeholder="搜索COS、视频、用户..."
                           v-model="input"
                           clearable >
                </el-input>  <el-button @click="sousuo" style="height: 39px;" con="el-icon-search">搜索</el-button>
              </el-menu-item>
              <el-menu-item index="8"  style="margin-left: 65px;font-size: 18px" @click="tologin">登录</el-menu-item>
              <el-menu-item index="9"  style="margin-left: 5px;font-size: 18px" @click="toregist">注册</el-menu-item>
              <el-dropdown index="10" style="margin-left: 10px ;" >
                <el-button style="background-color: #ff6fa2;width: 100px;height: 50px;">
                  <i class="el-icon-finished el-icon--right"style="font-size: 20px;align-content: center;color: aliceblue">发布</i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-circle-plus">图片</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus"><router-link to="/mvUpload">视频</router-link></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </el-menu>
          </div>
        </el-header>
        <el-main style=" background: url('http://qpt0e0e6g.hb-bkt.clouddn.com/1.gif')">
          <div style="border:2px;align-content: center;margin-left: 380px;width: 500px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <span style="font-size: 35px;">现在就加入半次元</span>
              <el-form-item label="请输入账号" prop="userName" style="margin-top: -50px">
                <el-input v-model="ruleForm.userName"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPassword">
                <el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-select v-model="ruleForm.sex"  placeholder="请选择性别" style="width: 400px;height: 40px">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="邮箱" prop="email" >
                <el-input v-model="ruleForm.email" style="width: 300px;height: 40px"> </el-input>
                <el-button  @click="sendMail" style="float:right;width: 100px;height: 40px;background-color: #ff6fa2">发送验证码</el-button>
              </el-form-item>
              <el-form-item label="请输入昵称" prop="name">
                <el-input v-model="ruleForm.name" style="width: 400px;height: 40px"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-input v-model="ruleForm.code"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button style="background-color: #ff6fa2" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>


    </div>
</template>

<script>
  import axios from 'axios';
  axios.defaults.withCredentials=true
    export default {
        name: "index",
      data() {
        return {
          ruleForm: {
          },
          rules: {
            password: [
              { validator: validatePassword, trigger: 'blur' }
            ],
            checkPassword: [
              { validator: validatePassword2, trigger: 'blur' }
            ],
            userName: [
              { required: true, message: '请输入登录账号', trigger: 'blur' },
              {  max: 12, message: '长度低于12位', trigger: 'blur' }
            ],
            sex: [
              { required: true, message: '请选择性别', trigger: 'change' }
            ]
          },
          activeIndex: '1',
          input: ''
        };
        var validatePassword = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.checkPassword !== '') {
              this.$refs.ruleForm.validateField('checkPassword');
            }
            callback();
          }
        };
        var validatePassword2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
      },
      methods: {
        toindex:function(){
          this.$router.push("/index")
        },
        sendMail:function (){
          //发送验证码
          axios.post("http://localhost/bcy-user/user/sendEmail",{email:this.ruleForm.email}).then(res=>{
            if(res.data.code==200){
              alert(res.data.message)
            }else{
              alert(res.data.message)
            }
          });
        },

        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              axios.post("http://localhost/bcy-user/user/regist",this.ruleForm).then(res=> {
                if (res.data.code == 200) {
                  this.$message({
                    showClose: true,
                    message: '恭喜你，注册成功',
                    type: 'success'
                  });
            this.$router.push("/login")
                }else {
                  alert(res.data.message)
                }
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        tologin:function(){
          this.$router.push("/login")
        },toregist:function(){
        this.$router.push("/regist")
      },

          sousuo:function(){
            this.$router.push("/redios")
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
      }
    }
</script>

<style scoped>
  .el-header, .el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
